<script setup>
import {useTokenStore} from "@/js/util/token";
import router from "@/router";
import {ref} from "vue";
import { ElMessage } from 'element-plus'
import '@/css/index.css'
import request from "@/js/util/request";
import {CategoryGetService} from "@/js/api";

//跳转登录和退出功能
//登录和退出功能的显示和隐藏
const isLogin = ref(true)
//退出登录
const doExit = ()=>{
  useTokenStore().removeToken();
  router.go(0)
}
//跳转登录页面
const toLogin=()=>{
  router.push("/login")
}

//用户信息
const username = ref("默认用户")
const avatar = ref("https://gitee.com/fangzexin/drawing-bed/raw/image/noUser2.png")
//在页面显示用户名
const showUser = ()=>{
  let url = "/userInfo";
  let token = useTokenStore().token;
  if(token){//有token就查询用户信息
    request.get(url).then(function (result){
      username.value = result.data.data.username
      avatar.value = result.data.data.avatar
      //document.getElementById("username").innerText=username
      //隐藏登录功能，显示退出功能
      isLogin.value = false
    })
  }else{
    ElMessage.warning("请先登录");
  }
}
//图书种类的数据模型
const BookCategory = ref([])
//获取图书种类
const getCategory = async () => {
  if(useTokenStore().token){
    let result = await CategoryGetService()
    BookCategory.value = result.data.data
    //处理数据，取出第一个图书种类
    let firstType
    for(let i = 0; i < 1; i++){
      firstType = BookCategory.value[i]
    }
    // await bookList(firstType)
  }
}
const test = (category)=>{
  useTokenStore().setCategory(category)
  useTokenStore().removeBookName()
  router.go(0)
}
//搜索功能
//待搜索的图书名称
const searchBookName = ref('')
const search = (bookname) => {
  useTokenStore().setBookName(bookname)
  console.log(useTokenStore().bookName)
  router.go(0)
}
//跳转个人中心
const toPersonCenter = () => {
  if(useTokenStore().token){
    router.push("/personCenter")
  }else{
    ElMessage.warning("请先登录^_^")
  }

}
//在setup语法糖中，直接使用函数相当于在create钩子函数中使用函数
showUser()
getCategory()


</script>

<template>
  <el-container style="height: 100%;">
    <!-- 头部 -->
    <el-header id="head" height="60px">
      <el-menu
          default-active="/all"
               class="el-menu-demo"
               mode="horizontal"
               :ellipsis="false"
               router>
        <el-sub-menu index="/all">
          <template #title>{{useTokenStore().category}}</template>
          <el-menu-item @click="test('全部图书')">全部图书</el-menu-item>
          <el-menu-item
              v-for="(category, key) in BookCategory"
              :key="key"
              :value="category"
              index=""
              @click="test(category)"
              default-active="index"
          ><span>{{category}}</span></el-menu-item>
        </el-sub-menu>

        <!--flex-grow的css设置为了使上面的菜单项和下面的菜单项分别靠左靠右-->
        <div class="flex-grow" />
        <el-menu-item index="">
          <el-input v-model="searchBookName">

          </el-input>
          <el-button @click="search(searchBookName)"><el-icon><Search /></el-icon></el-button>
        </el-menu-item>
        <el-sub-menu id="userMessage" index="">
          <template #title>
            <el-avatar :src="avatar" />
            <span id="username">{{username}}</span>
          </template>
          <el-menu-item @click="toPersonCenter">个人中心</el-menu-item>
          <el-menu-item @click="toLogin" v-if="isLogin">请登录</el-menu-item>
          <el-menu-item @click="doExit" v-else>退出</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-header>

    <!-- 中部 -->
    <el-main id="main">
      <router-view></router-view>
    </el-main>

    <!-- 尾部 -->
    <el-footer id="foot">
      Copyright © 2020 - 2021 . 回书商城.All Rights Reserved
    </el-footer>


  </el-container>
</template>

<style>
.flex-grow{
  flex-grow: 1;
}
.el-tabs__nav-scroll{
  height: 0;
}
</style>